<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<title>族谱</title>
		<meta name="keywords" content="css,css3" />
		<link rel="stylesheet" type="text/css" href="${ctx}/assets/css/main.css" />
		<link rel="stylesheet" type="text/css" href="${ctx}/assets/css/font-awesome.min.css">
		<script src="${ctx}/assets/js/jquery.min.js" type="text/javascript"></script>
		<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
		<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	</head>

	<body>
		<button class="btn btn-info btn-xs pull-left print">打印</button>
		<div style="display: flex;height: 35px; padding-left: 45px; width: 300px;position: absolute;">
			<input type="text" id="se" class="form-control"  placeholder="输入ID"> 
			<input type="password" id="se-password" class="form-control" placeholder="输入密码">
			<button type="button" style="margin: 0 10px" class="btn btn-primary" onclick="se();">搜索</button>
		</div>

		<button class="btn btn-default pull-right showall">显示所有</button>
		<div id="main">
			<div style="float: right">
				<button class="btn btn-success fangda">放大</button>
				<button class="btn btn-info xuoxiao">缩小</button>
			</div>
			<div class="tree"></div>
		</div>
		<ul class="wrap-ms-right">
			<li class="ms-item addqizi" data-item="0"><i class="fa fa-plus"></i>&nbsp; 添加配偶
			</li>
			<li class="ms-item addup" style='display: none' data-item="1"><i class="fa fa-plus"></i>&nbsp; 向上添加</li>
			<li class="ms-item adddown" data-item="1"><i class="fa fa-plus"></i>&nbsp; 向下添加
			</li>
			<li class="ms-item modify" data-item="2"><i class="fa fa-files-o"></i>&nbsp; 修改名称
			</li>
			<li class="ms-item remove" data-item="3"><i class="fa fa-trash"></i>&nbsp; 删除当前
			</li>
		</ul>
		<div class="nameboxbg">
			<div class="namebox">
				<div class="title">请表单内容</div>
				<div class="form-horizontal" style="margin-top: 20px;">
					<div class="form-group" id="form-id">
						<label for="ID" class="col-sm-2 control-label">ID</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="userId" placeholder="请输入用户ID">
						</div>
					</div>
					<div class="form-group"  id="form-name1" style="display:none;">
						<label for="loginName" class="col-sm-2 control-label">登录名</label>
						<div class="col-sm-9">
							<input type="text" class="form-control loginName" id="loginName" placeholder="请输入登录名">
						</div>
					</div>

					<div class="form-group" id="form-name2" style="display:none;">
						<label for="name" class="col-sm-2 control-label">中文名</label>
						<div class="col-sm-9">
							<input type="text" class="form-control name" id="name" placeholder="请输入中文名">
						</div>
					</div>
					<div class="form-group">
						<label for="pwd" class="col-sm-2 control-label">密码</label>
						<div class="col-sm-9">
							<input type="password" class="form-control pwd" id="pwd" placeholder="请输入密码">
						</div>
					</div>
					<div class="form-group" id="form-tel" style="display:none;">
						<label for="telephone" class="col-sm-2 control-label">手机号</label>
						<div class="col-sm-9">
							<input type="text" class="form-control telephone" id="telephone" placeholder="请输入手机号">
						</div>
					</div>
					<div class="form-group" id="form-sex" style="display:none;">
						<label for="telephone" class="col-sm-2 control-label">性别</label>
						<div class="col-sm-9">
							<select class="form-control sex">
								<option value="男">男</option>
								<option value="女">女</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-6 col-sm-6">
							<button class="btn btn-lg btn-success tijiao">提交</button>
							<button class="btn btn-lg btn-warning quxiao">取消</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			function ONanimation() {
				$('#userId').val('');
				$('.name').val('');
				$('#loginName').val('');
				$('.telephone').val('');
				$('.pwd').val('');
				$('.sex').attr("disabled", false);
				$('.nameboxbg').removeClass('boxbganimation1').addClass(
					'boxbganimation');
				$('.namebox').removeClass('boxanimation1').addClass('boxanimation');
			};

			function OFFanimation() {
				$('#userId').val('');
				$('#loginName').val('');
				$('.name').val('');
				$('.telephone').val('');
				$('.pwd').val('');
				$('.sex').attr("disabled", false);
				$('.nameboxbg').removeClass('boxbganimation').addClass(
					'boxbganimation1');
				$('.namebox').removeClass('boxanimation').addClass('boxanimation1');
			};

			function getArray(arr) {
				var data = arr.children;
				var parid = arr.id;
				for(var i in data) {
					data[i].parid = arr.id;
					var str = '<li><a href="${ctx}/user?token=' + data[i].id + '" data-id="' + data[i].id + '" class="children' + data[i].id + '">' +
						data[i].name + '</a></li>';
					if($('.children' + parid).siblings('ul').length > 0) {
						$('.children' + parid).siblings('ul').append(str);
					} else {
						$('.children' + parid).after('<ul>' + str + '</ul>');
					}
					if(data[i].sex == '女') {
						$('.children' + data[i].id).css({
							'color': 'pink',
							'border-color': 'pink'
						});
						$('.children' + data[i].id).addClass("girl");
					}
					if(data[i].coupleName && data[i].coupleName != '') {
						if(data[i].sex == '男') {
							$('.children' + data[i].id)
								.append(
									'&nbsp; &nbsp; <a href="${ctx}/user?token=' +
									data[i].coupleId +
									'" style="color:pink;border-color:pink;">' +
									data[i].coupleName + '</a>');
						} else {
							$('.children' + data[i].id).append(
								'&nbsp; &nbsp; <a href="${ctx}/user?token=' +
								data[i].coupleId + '" >' +
								data[i].coupleName + '</a>');
						}
					}

					if(Object.keys(data[i].children).length > 0) {
						getArray(data[i]);
					}
					//console.log(str)
				}
			};

			function openItem() {
				//alert('${topId}');
				$
					.ajax({
						url: "${ctx}/api/genealogy",
						method: 'post',
						dataType: 'json',
						//contentType:'application/json',  
						xhrFields: {
							withCredentials: true
						},
						data: {
							'token': '${topId}'
						},
						timeout: 1000,
						success: function(json) {
							var parentss = '';
							if(json.data.sex == '女') {
								parentss = '<ul><li><a href="${ctx}/user?token=' + json.data.id + '" data-id="' + json.data.id + '" class="children' + json.data.id +
									' thistop girl" style="color:pink;border-color:pink;">' +
									json.data.name + '</a></li></ul>';
							} else {
								parentss = '<ul><li><a href="${ctx}/user?token=' + json.data.id + '" data-id="' + json.data.id + '" class="children' + json.data.id +
									' thistop">' +
									json.data.name + '</a></li></ul>';
							}
							$('.tree').empty();
							$('.tree').append(parentss);
							if(json.data.coupleName &&
								json.data.coupleName != '') {
								if(json.data.sex == '男') {

									$('.children' + json.data.id)
										.append(
											'&nbsp; &nbsp; <a href="${ctx}/user?token=' +
											json.data.coupleId +
											'" style="color:pink;border-color:pink;">' +
											json.data.coupleName +
											'</a>');
								} else
									$('.children' + json.data.id).append(
										'&nbsp; &nbsp; <a href="${ctx}/user?token=' +
										json.data.coupleId + '">' +
										json.data.coupleName +
										'</a>');
							}
							getArray(json.data);
						},
						fail: function(err) {
							console.log(err)
						}
					})
			};

			function openItemAll() {
				$
					.ajax({
						url: "${ctx}/api/genealogyall",
						method: 'post',
						dataType: 'json',
						//contentType:'application/json',  
						xhrFields: {
							withCredentials: true
						},
						data: {
							'token': '${topId}'
						},
						timeout: 1000,
						success: function(json) {
							var parentss = '';
							if(json.data.sex == '女') {
								parentss = '<ul><li><a href="${ctx}/user?token=' + json.data.id + '" data-id="' + json.data.id + '" class="children' + json.data.id +
									' thistop girl" style="color:pink;border-color:pink;">' +
									json.data.name + '</a></li></ul>';
							} else {
								parentss = '<ul><li><a href="${ctx}/user?token=' + json.data.id + '" data-id="' + json.data.id + '" class="children' + json.data.id +
									' thistop">' +
									json.data.name + '</a></li></ul>';
							}
							$('.tree').empty();
							$('.tree').append(parentss);
							if(json.data.coupleName &&
								json.data.coupleName != '') {
								if(json.data.sex == '男')
									$('.children' + json.data.id)
									.append(
										'&nbsp; &nbsp; <a href="${ctx}/user?token=' +
										json.data.coupleId +
										'" style="color:pink;border-color:pink;">' +
										json.data.coupleName +
										'</a>');
								else
									$('.children' + json.data.id).append(
										'&nbsp; &nbsp; <a href="${ctx}/user?token=' +
										json.data.coupleId + '">' +
										json.data.coupleName +
										'</a>');
							}
							getArray(json.data);
						},
						fail: function(err) {
							console.log(err)
						}
					})
			};

			function deleteItem(token) {
				$.ajax({
					url: '${ctx}/api/genealogydelete',
					type: 'post',
					dataType: 'json',
					data: {
						id: token
					},
					timeout: 1000,
					success: function(json) {
						if(json.code == 200) {
							//window.location.reload();
							window.location.href = "${ctx}/tree";
						} else {
							alert(json.message);
						}

					},
					fail: function(err) {
						alert(arr);
					}
				})
			}

			function getItem(token) {
				$.ajax({
					url: '${ctx}/api/genealogyget',
					type: 'post',
					dataType: 'json',
					data: {
						id: token
					},
					timeout: 1000,
					success: function(json) {
						if(json.code == 200) {
							var data = json.data;
							$('#loginName').val(data.loginName);
							$('#name').val(data.name);
							$('#pwd').val(data.pwd);
							$('#telephone').val(data.telephone);
							$('.sex').val(data.sex);
							$('.sex').attr("disabled", false);
						} else {
							alert(json.message);
						}
					},
					fail: function(err) {
						alert(arr);
					}
				})
			}

			function updateItem(token) {
				var sex = $('.sex option:selected').val();
				var loginName = $('#loginName').val();
				var name = $('.name').val();
				var telephone = $('.telephone').val();
				var pwd = $('.pwd').val();
				if(name == '' || loginName == '') {
					alert('请输入名称');
					return false;
				}
				$.ajax({
					url: '${ctx}/api/genealogyupdate',
					type: 'post',
					dataType: 'json',
					data: {
						loginName: loginName,
						pwd: pwd,
						id: token,
						name: name,
						sex: sex,
						telephone: telephone
					},
					timeout: 1000,
					success: function(json) {
						OFFanimation();
						if(json.code == 200) {
							$('.data-this').removeClass('data-this');
							window.location.href = "${ctx}/tree";
							//window.location.reload();
						} else {
							alert(json.message);
						}
					},
					fail: function(err) {
						alert(arr);
					}
				})
			};

			function addItemChild(token) {
				var sex = $('.sex option:selected').val();
				var loginName = $('#loginName').val();
				var name = $('.name').val();
				var telephone = $('.telephone').val();
				var pwd = $('.pwd').val();
				var userId= $('#userId').val();
				//if(name == '' || loginName == '') {
				//	alert('请输入名称');
				//	return false;
				//}
				if(userId==''){
					alert('请输入用户ID');
					return false;
				}
				$.ajax({
					url: '${ctx}/api/genealogyaddchild',
					type: 'post',
					dataType: 'json',
					data: {
						id: userId,
						loginName: loginName,
						pwd: pwd,
						token: token,
						name: name,
						sex: sex,
						telephone: telephone
					},
					timeout: 1000,
					success: function(json) {
						OFFanimation();
						if(json.code == 200) {
							$('.data-this').removeClass('data-this');
							window.location.href = "${ctx}/tree";
						} else {
							alert(json.message);
						}
					},
					fail: function(err) {
						alert(arr);
					}
				})
			};

			function addItemParent(token) {
				var sex = $('.sex option:selected').val();
				var loginName = $('#loginName').val();
				var name = $('.name').val();
				var telephone = $('.telephone').val();
				var pwd = $('.pwd').val();
				var userId= $('#userId').val();
				//if(name == '' || loginName == '') {
				//	alert('请输入名称');
				//	return false;
				//}
				if(userId==''){
					alert('请输入用户ID');
					return false;
				}
				$.ajax({
					url: '${ctx}/api/genealogyaddparent',
					type: 'post',
					dataType: 'json',
					data: {
						id: userId,
						loginName: loginName,
						pwd: pwd,
						token: token,
						name: name,
						sex: sex,
						telephone: telephone
					},
					timeout: 1000,
					success: function(json) {
						OFFanimation();
						if(json.code == 200) {
							$('.data-this').removeClass('data-this');
							window.location.href = "${ctx}/tree";
						} else {
							alert(json.message);
						}
					},
					fail: function(err) {
						alert(arr);
					}
				})
			};

			function addItemCouple(token) {
				var sex = $('.sex option:selected').val();
				var loginName = $('#loginName').val();
				var name = $('.name').val();
				var telephone = $('.telephone').val();
				var pwd = $('.pwd').val();
				var userId= $('#userId').val();
				//if(name == '' || loginName == '') {
				//	alert('请输入名称');
				//	return false;
				//}
				if(userId==''){
					alert('请输入用户ID');
					return false;
				}
				$.ajax({
					url: '${ctx}/api/genealogyaddcouple',
					type: 'post',
					dataType: 'json',
					data: {
						id:userId,
						loginName: loginName,
						pwd: pwd,
						token: token,
						name: name,
						sex: sex,
						telephone: telephone
					},
					timeout: 1000,
					success: function(json) {
						OFFanimation();
						if(json.code == 200) {
							$('.data-this').removeClass('data-this');
							window.location.href = "${ctx}/tree";
						} else {
							alert(json.message);
						}

					},
					fail: function(err) {
						alert(arr);
					}
				})
			};

			// 动画

			// 取消
			$('.quxiao').click(function() {
				OFFanimation();
				$('.data-this').removeClass('data-this');
			})
			$("body").on('li a').unbind("mousedown").bind("contextmenu",
				function(e) {
					e.preventDefault();
					return false;
				})
			var userId = '';
			$("body").on("mousedown", 'li>a', function(event) {
				//var html = $('.tree').html();
				//console.log(html);
				$('.data-this').removeClass('data-this');
				$(this).addClass('data-this');
				userId = $(this).attr('data-id');
				// console.log("userId = " + userId);
				if(event.which == 3) {
					$('.wrap-ms-right').css({
						"display": "block",
						"top": (event.pageY - 5) + "px",
						"left": (event.pageX - 2) + "px"
					})
					//判断是否有已经有妻子;
					
					
				//	if($('.data-this').find('a').length == 1) {
					//	$('.addqizi').hide();
				//	} else {
					//	$('.addqizi').show();
				//	}
				//	if($('.data-this').hasClass('girl')) {
				//		$('.adddown').hide();
				//		$('.addqizi').hide();
				//	} else {
				//		$('.adddown').show();
				//		$('.addqizi').show();
				//	}
				//	if('${loginUser.coupleId}' == userId){
				//		userId = '${loginUser.id}';
					//}
				
					if(userId == '${loginUser.id}'){
						$('.modify').show();
					}
					else{
						$('.modify').hide();
					}
					//判断是否为顶层
					if($('.data-this').hasClass('thistop')) {
						$('.addup').show();
					} else {
						$('.addup').hide();
					}

				}
			});
			var addtype = -1;
			$('.addqizi').click(function() {
				ONanimation();
				$('.sex').val('女');
				$('.sex').attr("disabled", true);
				$('#form-id').css('display','block');
				$('#form-tel').css('display','none');
				$('#form-name1').css('display','none');
				$('#form-name2').css('display','none');
				$('#form-sex').css('display','none');
				addtype = 0;
			})
			$('.adddown').click(function() {
				ONanimation();
				$('#form-id').css('display','block');
				$('#form-tel').css('display','none');
				$('#form-name1').css('display','none');
				$('#form-name2').css('display','none');
				$('#form-sex').css('display','none');
				addtype = 1;
			})
			$('.addup').click(function() {
				ONanimation();
				$('#form-id').css('display','block');
				$('#form-tel').css('display','none');
				$('#form-name1').css('display','none');
				$('#form-name2').css('display','none');
				$('#form-sex').css('display','none');
				addtype = 2;
			})
			$('.modify').click(function() {
				ONanimation();
				getItem(userId);
				$('#form-id').css('display','none');
				$('#form-tel').css('display','block');
				$('#form-name1').css('display','block');
				$('#form-name2').css('display','block');
				$('#form-sex').css('display','block');
				addtype = 3;
			})
			$('.remove').click(function() {
				deleteItem(userId);
			})

			$('.tijiao').click(function() {
				/*
					addtype 添加类型：0：妻子，1:向下，2：向上，3：修改，4：删除
				 */
				//console.log(userId);
				switch(addtype) {
					case 0:
						addItemCouple(userId);
						break;
					case 1:
						addItemChild(userId);
						break;
					case 2:
						addItemParent(userId);
						break;
					case 3:
						updateItem(userId);
						break;
					default:
						break;
				}
			})

			$(document).click(function() {
				$('.wrap-ms-right').css({
					"display": "none"
				});
			});
			$('.showall').click(function() {
				openItemAll();
			});
			$('.print').click(function() {
				window.print();
			});
			$('.fangda').click(function() {
				var zoom = $('html').css('zoom');
				console.log(parseFloat(zoom) + 0.1);
				$('html').css('zoom', parseFloat(zoom) + 0.2);
			})
			$('.xuoxiao').click(function() {
				var zoom = $('html').css('zoom');
				console.log(parseFloat(zoom) - 0.1);
				$('html').css('zoom', parseFloat(zoom) - 0.2);
			})
			openItem();
		</script>
		
	</body>
	<script type="text/javascript">
		function se () {
			var s = $('#se').val();
			var p = $('#se-password').val();
			if (s ==='') {
				alert('请输入要搜索的ID')
			} else if (p === ''){
				alert('请输入ID密码')
			} else {
				window.location.href='copytree?token='+s+'&p='+p;
			}
			}		
	</script>
</html>